<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>
		首页
	</title>
	<SCRIPT th:src="@{/js/jquery-3.1.1.js}"></SCRIPT>
	<link rel="stylesheet" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" />
	<script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>


</head>

<body>

<!--编辑模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="empEditModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">修改员工信息</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label  class="col-sm-2 control-label">eName</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="ename"  placeholder="ename" autoComplete="off">
						</div>
					</div>
					<div class="form-group">
						<label  class="col-sm-2 control-label">age</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="age"  placeholder="18" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">email</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="email"  placeholder="email@qq.com" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">birthday</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="birthday"  placeholder="1999/01/01" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">phone</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="phone"  placeholder="13888888999" autocomplete="off">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="emp_update_btn">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--新增模态框-->
<div class="modal fade" tabindex="-1" role="dialog" id="empAddModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">添加员工</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label  class="col-sm-2 control-label">eName</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="ename" id="ename_add_input" placeholder="ename" autoComplete="off">
						</div>
					</div>
					<div class="form-group">
						<label  class="col-sm-2 control-label">age</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="age" id="age_add_input" placeholder="18" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">email</label>
						<div class="col-sm-10">
						<input type="text" class="form-control" name="email"  placeholder="email@qq.com" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">birthday</label>
						<div class="col-sm-10">
						<input type="text" class="form-control" name="birthday"  placeholder="1999/01/01" autocomplete="off">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">phone</label>
						<div class="col-sm-10">
						<input type="text" class="form-control" name="phone"  placeholder="13888888999" autocomplete="off">
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--===========页面-->
<div class="container">
	<div class="row">
		<div class="col-md-12">
			<h1>员工管理-CRUD</h1>
		</div>
	</div>
	<div class="row">
		<div class="col-md-3 .col-md-offset-3" th:if="${not #strings.isEmpty(session.user)}">
			欢迎:<span style="color: #4cae4c" th:text="${session.user.username}"></span> |
			<button type="button" class=" btn btn-danger" id="logout">注销</button>
		</div>
		<div class="col-md-3 .col-md-offset-3" th:if="${#strings.isEmpty(session.user)}">
				<button type="button" class="btn btn-warning" id="regist">注册</button>
				<button type="button" class="btn btn-success" id="login">登录</button>
		</div>

	</div>
	<div class="row">
		<div class="col-md-4 col-md-offset-10">
			<button class="btn btn-info" id="emp_add_modal_btn" >新增</button>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<table class="table table-hover" id="emps_table">
				<thead>
				<tr>
					<th>eId</th>
					<th>eName</th>
					<th>Age</th>
					<th>Email</th>
					<th>Birthday</th>
					<th>Phone</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
<!--		         分页文字信息-->
		<div class="col-md-6" id="page_info_area">

		</div>

<!--        分页条信息-->
		<div class="col-md-6" id="page_nav_area">

		</div>
	</div>
</div>
	<!--==============js==========================-->
<script type="text/javascript" th:inline="javascript">
	var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
	/*====时间格式化=========*/
	Date.prototype.Format = function (fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}
	/*==============*/
		$(function () {
				list();
			})
			function list(){
				$("#emps_table tbody").empty();
				$.ajax({
					url:basePath+"/emps",
					type:"get",
					success:function (res) {
						var emps=res.extend.emps;
						$.each(emps, function (index, item) {
							var eid=$("<td></td>").append(item.eid);
							var ename=$("<td></td>").append(item.ename);
							var age=$("<td></td>").append(item.age);
							var email=$("<td></td>").append(item.email);
							var time1 = new Date(item.birthday).Format("yyyy-MM-dd");
							var birthday=$("<td></td>").append(time1);
							var phone=$("<td></td>").append(item.phone);

							var editBtn = $("<button></button>").addClass("btn btn-info btn-sm edit_btn")
									.append($("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑"));

							editBtn.attr("edit-id",item.eid);
							var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm del_btn")
									.append($("<span></span>").addClass("glyphicon glyphicon-trash").append("删除"));
							delBtn.attr("del-id",item.eid);

							var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
							$("<tr></tr>").append(eid)
									.append(ename)
									.append(age)
									.append(email)
									.append(birthday)
									.append(phone)
									.append(btnTd)
									.appendTo("#emps_table tbody");
						})
					}
			})
			}



			/*删除*/
		$(document).on("click",".del_btn",function ()  {
				var eid=$(this).attr("del-id");
				if (confirm("你确定要删除【"+$(this).parents("tr").find("td:eq(1)").text()+"】吗?")){
					$.ajax({
						url:basePath+"/emp/delete",
						data:"id="+eid,
						type: "get",
						success:function (res) {
							alert(res.msg);
							list();
						}
					})
				}
			})

	/*====注册、登录、注销跳转*/
	$(function () {
		$("#login").click(function () {
			window.location.href=basePath+"/loginpage";
		});
		$("#regist").click(function () {
			window.location.href=basePath+"/registpage";
		})
		$("#logout").click(function () {
			window.location.href=basePath+"/logout";
		})
	})
/*============添加*/
	$("#emp_add_modal_btn").click(function () {

		$("#empAddModal").modal({
			backdrop:"static"
		})
	})
	$("#emp_save_btn").click(function () {
		$.ajax({
			url: basePath + "/emp/add",
			type: "get",
			data: $("#empAddModal form").serialize(),
			success: function (result) {
				$('#empAddModal').modal('hide');
				list();
			}
		});
	});


</script>
</body>
</html>